<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        .wrapper div{
            width: 160px;
            height: 200px;
            border: 2px solid yellow;
            display: none;
        }
        .active{
            background-color: yellow;
        }
        .block{
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" class="inp active" value="选项1">
        <input type="button" class="inp" value="选项2">
        <input type="button" class="inp" value="选项3">
    </div>
    <div class="wrapper">
        <div class="content" style="display: block">111</div>
        <div class="content">222</div>
        <div class="content">333</div>
    </div>


<script>
    var btns = document.getElementsByClassName("inp");
    var divs = document.getElementsByClassName("content");
    for(var i=0; i<btns.length; i++){
        btns[i].onclick = function () {
            btns[i].className = "";
            for (var j=0; j<btns.length; j++){


            }
            this.className = "active";

        }
    }

</script>

</body>
</html>
